﻿<template id="@(ViewBag.PageTemplate)">
    <div class="layout-page-content">
        <single_table :api="`${path}/getdata`" :pagination="true" :border="true" row-key="Id" :search-columns="searchColumns" ref="tableRef">
            <template #header-left="scope">@(Html.Raw(ViewBag.PageFuncs("tools")))</template>
            <template #default>
                <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>
                <el-table-column prop="Avatar" label="头像" width="100" align="center">
                    <template #default="scope">
                        <el-avatar :size="36" :src="scope.row.Avatar?`/userfiles/sys/user/${scope.row.Avatar}`:null">{{scope.row.Name.substring(0,1)}}</el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="Username" label="用户名" width="200" align="center"></el-table-column>
                <el-table-column prop="Name" label="姓名" width="200" align="center"></el-table-column>
                <el-table-column prop="Status" label="状态" width="120" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.Status=='ok'" type="success">启用</el-tag>
                        <el-tag v-else type="info">停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="CreateTime" label="创建时间" width="220" align="center"></el-table-column>
                <single_table_operation count="@(ViewBag.PageFuncs("table:count"))">
                    <template #default="scope">@(Html.Raw(ViewBag.PageFuncs("table")))</template>
                </single_table_operation>
            </template>
        </single_table>
        <component is="@(ViewBag.GetCompName("form"))" ref="formRef" v-on:refresh="refresh"></component>
        <component is="@(ViewBag.GetCompName("role"))" ref="roleRef"></component>
        <component is="@(ViewBag.GetCompName("reset"))" ref="resetRef"></component>
    </div>
</template>
@await Html.PartialAsync("Form")
@await Html.PartialAsync("Role")
@await Html.PartialAsync("Reset")
<script type="text/javascript">
    var @(ViewBag.PageName) = {
        template: "#@(ViewBag.PageTemplate)", data() {
            return {
                path: "@(ViewBag.PagePath)",
                searchColumns: [
                    { title: "用户名", prop: "username" },
                    { title: "姓名", prop: "name" },
                    {
                        title: "状态", prop: "status", type: "select",
                        enums: [
                            { value: "ok", label: "启用" },
                            { value: "no", label: "停用" }
                        ]
                    }
                ]
            }
        },
        components: { @(ViewBag.GetCompName("form")), @(ViewBag.GetCompName("role")), @(ViewBag.GetCompName("reset")) },
        methods: {
            init(){
                var that = this;
            },
            refresh(){
                this.$refs.tableRef.loadData();
            },
            form(title, row){
                this.$refs.formRef.open(title, row);
            },
            del(ids){
                app.func.delete(`${this.path}/delete`, ids, this.refresh);
            },
            assign(row){
                this.$refs.roleRef.open(row);
            },
            reset(row){
                this.$refs.resetRef.open(row);
            }
        },
        mounted() { this.init(); }
    };
</script>